<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类和样式(class and style)</title>
  <!-- 
  在 JavaScript 中， `class`  和  `style`  是两个用于操作 HTML 元素的重要属性，但它们的功能和用途有所不同。以下是关于  `class`  和  `style`  的区别的总结说明：

  1. 定义
  - class：用于定义元素的 CSS 类名。通过类名，可以将样式应用到多个元素上，便于样式的复用和管理。
  - style：用于直接定义元素的内联样式。通过  `style`  属性，可以为特定元素设置特定的样式，通常用于单独的样式调整。

  2. 用法
  - class：通过  `className`  属性或  `classList`  方法来获取或设置元素的类名。
    const element = document.getElementById('myElement');
    element.className = 'myClass'; // 设置类名
    console.log(element.className); // 获取类名

    // 使用 classList 方法
    element.classList.add('newClass'); // 添加类名
    element.classList.remove('myClass'); // 移除类名
  - style： 通过  `style`  属性来直接设置元素的内联样式。
    element.style.color = 'red'; // 设置文本颜色为红色
    element.style.backgroundColor = 'blue'; // 设置背景颜色为蓝色
  3. 适用场景
  - class：
    - 适用于需要复用的样式，尤其是在多个元素之间共享同一组样式时。
    - 当需要通过 CSS 文件或  `<style>`  标签定义样式时，使用类名是更好的选择。

  - style：
    - 适用于需要单独调整某个元素样式的情况，通常用于动态变化的样式。
    - 当样式需要根据 JavaScript 逻辑动态改变时，使用内联样式更为方便。

  4. 影响范围
  - class：
    - 影响所有使用该类名的元素。如果多个元素共享同一类名，它们都会受到该类样式的影响。

  - style：
    - 只影响设置了该样式的特定元素，不会影响其他元素。

  5. 优先级
  - 在 CSS 中，内联样式（通过  `style`  属性设置）具有最高优先级，优先于外部样式表和内部样式表。
  - 类名样式的优先级低于内联样式，但高于浏览器默认样式。

  总结
  -  `class`  用于设置元素的类名，便于样式的复用和管理。
  -  `style`  用于设置元素的内联样式，适合特定元素的样式调整。
  - 根据需求选择合适的方法来操作元素的样式，可以提高代码的可维护性和可读性。
   -->
  <style>
    .myClass {
      color: skyblue;
      font-size: 20px;
      background-color: pink;
    }

    .newClass {
      color: red;
      font-size: 20px;
      background-color: pink;
    }
  </style>
</head>
<body>
  
  <h3>1. 类和样式</h3>
  <div class="myClass">类和样式(class and style)</div>

  <h3>2. 切换类和样式</h3>
  <div class="newClass">切换类和样式(class and style)</div>
  <button>切换</button>

  <h3>3. 样式</h3>
  <div class="myStyle">样式(style)</div>

  <script>
    // 1. 获取元素
    const elementEl = document.querySelector('.myClass');
    const newClassEl = document.querySelector('.newClass');
    const myStyleEl = document.querySelector('.myStyle');
    const buttonEl = document.querySelector('button');

    // 2. 使用 classList 方法
    elementEl.classList.add('newClass'); // 添加类名
    elementEl.classList.remove('myClass'); // 移除类名

    // 3. 添加事件监听器
    buttonEl.addEventListener('click', function () {
      // 使用 classList 方法
      newClassEl.classList.toggle('newClass'); // 切换类名
    });

    // 4. 使用 style 属性
    // 4.1. 只能获取行内样式，不能获取内联样式和外联样式
    myStyleEl.style.color = 'skyblue'; // 设置文本颜色为天蓝色
    myStyleEl.style.backgroundColor = 'pink'; // 设置背景颜色为粉色
    // 4.2 设置多个样式 - 设置的样式会覆盖之前的样式  
    myStyleEl.style.cssText = 'font-size: 20px; border: 1px solid red;';
    // 4.3 获取样式
    console.log(myStyleEl.style.color); // 获取文本颜色
    console.log(myStyleEl.style.backgroundColor); // 获取背景颜色
    console.log(myStyleEl.style.fontSize); // 获取字体大小
    console.log(myStyleEl.style.border); // 获取边框
    console.log(getComputedStyle(myStyleEl).color); // getComputedStyle获取文本颜色
    
  </script>
  
</body>
</html>